<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: 刘世琪
 * @Date: 2021-03-11 10:24:34
 * @LastEditors: Seven
 * @LastEditTime: 2021-03-15 00:04:00
-->
<template>
    <div>
         <div style="width: 100%;height: calc(100vh - 207px);background: #ffffff;margin-top: 20px;">
      <a-table
        rowKey="id"
        :columns="columns"
        :data-source="data"
        :pagination="{ pageSize: 20 }"
        :scroll="{ y: clientHeight - 350 }"
      >

        <!-- 状态 -->
        <!-- <span slot="state" >
          <a-switch default-checked @change="onChange" />
        </span>     -->

        

        <!-- 操作 -->
        <span slot="action" slot-scope="text, record">
          <a-button type="primary" @click="showModal(true,record)">修改</a-button>
          
          


          
          
          <a-divider type="vertical"/>
          <a-button type="danger" @click="showDeleteConfirm(text)">删除</a-button>
        </span>
      </a-table>
    </div>

        

    </div>
</template>

<script>
import axios from 'axios'
const columns = [
    {
      title: '角色',
      dataIndex: 'title',
      // dataIndex: 'role_name',
      width: 300,
    },
    {
        title: '介绍',
        dataIndex: 'permissions[0].title',
        // dataIndex: 'role_name',
        width: 300,
    },
    // {
    //   title: '有效状态',
    //   dataIndex: 'state',
    //   scopedSlots: { customRender: 'state' },
    //   width: 100,
    // },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' },
      width: 300,
    },
  ];
export default {
    data() {
        return {
            data:[],
            columns, 
            clientHeight: 0,     // 设置默认值
            bser_url:'http://127.0.0.1:8000/',
            visible: false,
        }
    },
        mounted() {
      // 在DOM渲染数据时，设置下区域高度为浏览器可视区域高度．
      this.clientHeight = document.body.clientHeight;
      this.div_height = document.body.clientHeight - 300;
      // 监听window的resize事件．在浏览器窗口变化时再设置下区域高度．
      // console.log(this.clientHeight);
      const _this = this;
      window.onresize = function temp() {
        _this.clientHeight = document.body.clientHeight;
        _this.div_height = document.body.clientHeight - 300;
      };
    },
    methods: {
        // /角色列表的展示
        getRoleList() {
            axios({
                url: this.bser_url + 'adrole/'
            }).then(resp =>{
                console.log(resp.data)
                this.data = resp.data.data;
            })
        },
        onChange(checked){
            if(checked == true){
                this.$message.info('已开启')
                // alert('已开启')
            }else{
                this.$message.info('已关闭')
            }

            // console.log(`a-switch to ${checked}`);
        },
    },
    created() {
        this.getRoleList();
    
    }
}
</script>

<style scoped>

</style>
